import { UseTable } from '@/components';
import { getStr, getTitleDiv,getKey } from '@/components/function';
import MembersController from '@/services/Members/MembersController';
import ScheduleItemsController from '@/services/scheduleItems/ScheduleItemsController';
import { Collapse, Descriptions, message,Table } from 'antd';
import {educationList,sexList,roleList,targsList} from '@/components/function/globalData'
import React from 'react';
import moment from 'moment';
const {Panel} = Collapse
class index extends React.Component {
    constructor(props) {
        super(props);
        this.state = { 
            data:props.rowData,
            panelKey:'one'
         };
    }

    componentDidMount(){
    }
    getMembers=(query)=>{
        let {data} = this.state
        query.projectCode = data.projectCode
        return MembersController.getList(query)
    }
    getScheduleItems=(query)=>{
        let {data} = this.state
        query.projectCode = data.projectCode
        return ScheduleItemsController.getList(query)
    }

    getone=()=>{
        let {data} = this.state
        return(
            <div>
                <div>
                    {getTitleDiv('基本信息')}
                    <Descriptions>
                        <Descriptions.Item label={"项目名称"}>{data.projectName}</Descriptions.Item>
                        <Descriptions.Item label={"项目类别"}>{data.projectType}</Descriptions.Item>
                        <Descriptions.Item label={"项目负责人"}>{data.projectLeaderName}</Descriptions.Item>
                        <Descriptions.Item label={"申请时间"}>{data.createdAt}</Descriptions.Item>
                        <Descriptions.Item label={"申请人"}>{data.createdBy}</Descriptions.Item>
                        <Descriptions.Item label={"项目级别"}>{data.projectLevel}</Descriptions.Item>
                    </Descriptions>
                </div>
                <div>
                    {getTitleDiv('实施方案')}
                    <pre>{data.implementationPlan}</pre>
                </div>
                <div>
                    {getTitleDiv('立项原因')}
                    <pre>{data.approvalReasons}</pre>
                </div>
                <div>
                    {getTitleDiv('研究方向')}
                    <pre>{data.researchDirection}</pre>

                </div>
                <div>
                    {getTitleDiv('项目要点')}
                    <pre>{data.projectPoint}</pre>
                </div>
            </div>
        )

    }
    
    getTwo=()=>{
        const columns = [
            {title:'姓名',dataIndex:'name'},
            {title:'性别',dataIndex:'sex',render:text=>getKey(text,sexList)},
            {title:'出生日期',dataIndex:'birthday'},
            {title:'学历',dataIndex:'education'},
            {title:'省级部门',dataIndex:'provinceDepartmentName'},
            {title:'市级部门',dataIndex:'cityDepartmentName'},
            {title:'角色',dataIndex:'roleName',},
        ]
        return<UseTable getData={this.getMembers} columns={columns} />
    }

    getThree=()=>{
        let {data} = this.state
        let dataSource = JSON.parse(data.filesItems)
        const columns = [
            {title:'序号',dataIndex:'url',render:(text,row,index)=>index+1},
            {title:'文件名',dataIndex:'fileName'},
            {title:'描述',dataIndex:'description',render:text=>getStr(text)},
            {title:'操作',dataIndex:'url',render:(text,row,index)=><a href={text} target="_blank">下载</a>},
        ]
        return<Table columns={columns} dataSource={dataSource}/>
       
    }

    getFour=()=>{
        let {data} = this.state
        let dataSource = JSON.parse(data.budgetItems)
        return<div>
                <div style={{margin:10}}>
                    <strong>预算总额：</strong>
                    <span>{data.budgetTotal}</span>
                </div>
                <Table columns={[{title:'预算项目',dataIndex:'budgetName'},{title:'预算费用',dataIndex:'budget'}]} dataSource={dataSource}/>
              </div>
    }

    getFive=()=>{
        const columns=[
            {title:'开始时间',dataIndex:'startDate',render:text=>moment(text).format("YYYY-MM-DD")},
            {title:'结束时间',dataIndex:'endDate',render:text=>moment(text).format("YYYY-MM-DD")},
            {title:'描述',dataIndex:'description',render:text=>getStr(text)},
            {title:'执行时间',dataIndex:'updatedAt',render:text=>text&&moment(text).format("YYYY-MM-DD")},
            {title:'执行人',dataIndex:'name'},
            {title:'成果附件',dataIndex:'files',render:text=>text&&<a href={text}>下载</a>},
            {title:'执行备注',dataIndex:'remark',render:text=>getStr(text)},
        ]
        return<UseTable columns={columns} getData={this.getScheduleItems} rowKey={'id'}/>
    }
    onCollapseChange=(e)=>{
        this.setState({
            panelKey:e
        })
    }
    showEvaluationDetail=()=>{}
    getRview=()=>{
        let review = []
        return<div>            
            {review.map(item=><Descriptions title={item.reviewStep}>                
                <Descriptions.Item label={'审核人'}>{item.reviewName}</Descriptions.Item>
                <Descriptions.Item label={'审核结果'}>{item.reviewResult}</Descriptions.Item>
                <Descriptions.Item label={'审核时间'}>{item.reviewTime}</Descriptions.Item>
                <Descriptions.Item label={'审核备注'}>{item.reviewRemark}</Descriptions.Item>
            </Descriptions>)}
        </div>
    }
    getResult=()=>{
        let {data} = this.state
        let dataSource = JSON.parse(data.resultFile)
        const columns = [
            {title:'序号',dataIndex:'url',render:(text,row,index)=>index+1},
            {title:'文件名',dataIndex:'fileName'},
            {title:'描述',dataIndex:'description',render:text=>getStr(text)},
            {title:'操作',dataIndex:'url',render:(text,row,index)=><a href={text} download={row.fileName}>下载</a>},
        ]
        return<Table columns={columns} dataSource={dataSource}/>
    }
    showEvaluationDetail=(text)=>{
        let data = JSON.parse(text)
        let res = data.map((item,index)=><List>
            <List.Item key={index}>{item.name}：{item.value}</List.Item>
        </List>)
        return <Popover content={res}>{data.length}条</Popover>
    }
    getEvaluation=()=>{
        const columns=[
            {title:'评价环节',dataIndex:'evaluateStep'},
            {title:'评价类别',dataIndex:'evaluateItem',render:text=>this.showEvaluationDetail.bind(this,text)},
            {title:'得分',dataIndex:'scoreTotal',render:text=>getStr(text)},
            {title:'评价时间',dataIndex:'createdAt',render:text=>text&&moment(text).format("YYYY-MM-DD")},
            {title:'评价人',dataIndex:'evaluateName'},            
            {title:'备注',dataIndex:'remark',render:text=>getStr(text)},
        ]
        return<UseTable columns={columns} getData={this.getScheduleItems} rowKey={'id'}/>
    }
    render() {
        let {panelKey} = this.state
  
        return (
            <div>
                <Collapse accordion onChange={this.onCollapseChange}>
                    <Collapse.Panel header={'项目介绍'} key={'one'}>{panelKey==='one'&&this.getone()}</Collapse.Panel>
                    <Collapse.Panel header={'参与人员'} key={'two'}>{panelKey==='two'&&this.getTwo()}</Collapse.Panel>
                    <Collapse.Panel header={'申报材料'} key={'three'}>{panelKey==='three'&&this.getThree()}</Collapse.Panel>
                    <Collapse.Panel header={'预算明细'} key={'four'}>{panelKey==='four'&&this.getFour()}</Collapse.Panel>
                    <Collapse.Panel header={'进度安排'} key={'five'}>{panelKey==='five'&&this.getFive()}</Collapse.Panel>
                    <Collapse.Panel header={'项目审批'} key={'six'}>{panelKey==='six'&&this.getRview()}</Collapse.Panel>
                    <Collapse.Panel header={'成果展示'} key={'seven'}>{panelKey==='seven'&&this.getResult()}</Collapse.Panel>
                    <Collapse.Panel header={'成果评价'} key={'eight'}>{panelKey==='eight'&&this.getEvaluation()}</Collapse.Panel>
                </Collapse>
            
                
            </div>
        );
    }
}

export default index;